<template>
  <div class="movie-buy">
    <!-- 顶部返回导航 -->
    <div class="nav-bar">
      <div class="back" @click="$router.back()">
        <i class="iconfont">&#xe697;</i> 返回
      </div>
    </div>

    <!-- 电影信息部分 -->
    <div class="movie-info">
      <img :src="movie.poster" :alt="movie.name">
      <div class="info">
        <h2>{{ movie.name }}</h2>
        <div class="score" v-if="movie.score">
          <span class="number">{{ movie.score }}</span>
          <span class="text">分</span>
        </div>
        <div class="details">
          <p>{{ movie.type }} | {{ movie.duration }}分钟</p>
          <p>导演：{{ movie.director }}</p>
          <p>主演：{{ movie.actors }}</p>
        </div>
      </div>
    </div>

    <!-- 日期选择器 -->
    <div class="section-title">观影时间</div>
    <div class="date-selector">
      <div 
        v-for="date in dates" 
        :key="date.value"
        :class="['date-item', { active: currentDate === date.value }]"
        @click="selectDate(date.value)"
      >
        <span class="day">{{ date.day }}</span>
        <span class="date">{{ date.date }}</span>
      </div>
    </div>

    <!-- 场次列表 -->
    <div class="section-title">场次选择</div>
    <div class="showtime-list" v-if="showtimes.length">
      <div 
        v-for="showtime in showtimes" 
        :key="showtime.id"
        class="showtime-item"
        @click="selectShowtime(showtime)"
      >
        <div class="left">
          <div class="time">
            <span class="start-time">{{ showtime.startTime }}</span>
            <span class="end-time">{{ showtime.endTime }}散场</span>
          </div>
          <div class="language">{{ showtime.language }}{{ showtime.dimension }}</div>
        </div>
        <div class="middle">
          <div class="hall">{{ showtime.hall }}</div>
          <div class="seats">余票{{ showtime.availableSeats }}张</div>
        </div>
        <div class="right">
          <div class="price">
            <span class="number">{{ showtime.price }}</span>
            <span class="unit">元</span>
          </div>
          <button class="select-btn">选座购票</button>
        </div>
      </div>
    </div>
    <div v-else class="empty-tip">
      暂无可售场次
    </div>

    <!-- 提示信息 -->
    <div class="tips">
      <div class="tip-item">
        <i class="iconfont">&#xe6a3;</i>
        <span>开场前30分钟停止售票</span>
      </div>
      <div class="tip-item">
        <i class="iconfont">&#xe6a2;</i>
        <span>影院内禁止携带外部食品</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import MovieCard from '@/components/MovieCard.vue'

const router = useRouter()
const route = useRoute()

// 状态定义
const movie = ref({
  name: '流浪地球2',
  poster: 'https://p0.pipi.cn/mmdb/fb73862f7f1f9a05c8d3a5bd5b8a95c0d8e3d.jpg',
  score: 9.0,
  director: '郭帆',
  actors: '吴京,刘德华,李雪健',
  type: '科幻',
  duration: 160,
  language: '国语',
  dimension: '3D'
})

const currentDate = ref('')
const dates = ref([])
const showtimes = ref([
  {
    id: 1,
    startTime: '13:15',
    endTime: '15:55',
    language: '国语',
    dimension: '3D',
    hall: '2号激光厅',
    availableSeats: 120,
    price: 45.9
  },
  {
    id: 2,
    startTime: '15:50',
    endTime: '18:30',
    language: '国语',
    dimension: '3D IMAX',
    hall: '1号IMAX厅',
    availableSeats: 80,
    price: 59.9
  },
  {
    id: 3,
    startTime: '19:20',
    endTime: '22:00',
    language: '国语',
    dimension: '3D',
    hall: '3号厅',
    availableSeats: 100,
    price: 39.9
  }
])

// 方法定义
const generateDates = () => {
  const days = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
  dates.value = Array.from({ length: 7 }, (_, i) => {
    const date = new Date()
    date.setDate(date.getDate() + i)
    return {
      value: date.toISOString().split('T')[0],
      day: i === 0 ? '今天' : days[date.getDay()],
      date: `${date.getMonth() + 1}月${date.getDate()}日`
    }
  })
}

const selectDate = (date) => {
  currentDate.value = date
}

const selectShowtime = (showtime) => {
  router.push(`/movie/${route.params.id}/seat/${showtime.id}`)
}

// 生命周期钩子
generateDates()
currentDate.value = dates.value[0]?.value
</script>

<style scoped>
.movie-buy {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  min-height: 100vh;
  background: #f5f5f5;
}

.nav-bar {
  padding: 15px 0;
  margin-bottom: 20px;
}

.back {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  color: #333;
}

.back:hover {
  color: #ff5f16;
}

.movie-info {
  display: flex;
  gap: 30px;
  background: white;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
}

.movie-info img {
  width: 180px;
  height: 252px;
  object-fit: cover;
  border-radius: 8px;
}

.info h2 {
  margin: 0 0 15px 0;
  font-size: 24px;
}

.score {
  color: #ff5f16;
  margin-bottom: 15px;
}

.score .number {
  font-size: 24px;
  font-weight: bold;
}

.details p {
  margin: 8px 0;
  color: #666;
}

.section-title {
  font-size: 18px;
  font-weight: bold;
  margin: 20px 0 15px;
}

.date-selector {
  display: flex;
  gap: 15px;
  overflow-x: auto;
  padding-bottom: 10px;
  background: white;
  padding: 20px;
  border-radius: 8px;
}

.date-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 24px;
  border: 1px solid #eee;
  border-radius: 8px;
  cursor: pointer;
  min-width: 100px;
  transition: all 0.3s ease;
}

.date-item:hover {
  border-color: #ff5f16;
  transform: scale(1.05);
}

.date-item.active {
  background: #ff5f16;
  color: white;
  border-color: #ff5f16;
}

.showtime-list {
  display: grid;
  gap: 20px;
}

.showtime-item {
  display: flex;
  align-items: center;
  padding: 20px;
  border: 1px solid #eee;
  border-radius: 8px;
  cursor: pointer;
}

.left {
  flex: 1;
}

.time {
  font-size: 20px;
  font-weight: bold;
  width: 120px;
}

.language {
  flex: 1;
  color: #666;
}

.middle {
  flex: 1;
  display: flex;
  gap: 10px;
}

.hall {
  flex: 1;
  color: #666;
}

.seats {
  flex: 1;
  color: #666;
}

.right {
  flex: 1;
  display: flex;
  justify-content: flex-end;
}

.price {
  color: #ff5f16;
  font-size: 20px;
  font-weight: bold;
  margin: 0 20px;
}

.select-btn {
  padding: 8px 20px;
  background: #ff5f16;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.select-btn:hover {
  background: #ff4500;
}

.empty-tip {
  text-align: center;
  color: #666;
  margin-top: 20px;
}

.tips {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  padding: 10px;
  background: white;
  border-radius: 8px;
}

.tip-item {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #666;
}

@media (max-width: 768px) {
  .movie-info img {
    width: 120px;
    height: 168px;
  }
  
  .showtime-item {
    flex-wrap: wrap;
    gap: 10px;
  }
  
  .time, .hall {
    width: 100%;
  }
}
</style> 